<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String path = request.getContextPath();
	String base = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
%>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<style>
	.list-group-item{
		cursor: pointer;
		border: 0px solid!important;
	}
	h4:hover{
		transform: scale(1.4);
	}
	a{
		text-decoration:none!important;
	}
</style>
<div class="row">
	<div class="page-header" >
		<h3 style="display: inline;">
			${info.catagory.name } <small>${info.catagory.desc }</small>
		</h3>
	</div>
	<div class="container">
		<div class="row">
		<div class="col-md-2">
				<div data-spy="affix" data-offset-top="60">
					<ul class="list-group">
						<li class="list-group-item text-success"><h4><span class="glyphicon glyphicon-forward" aria-hidden="true"></span>&nbsp;<a href="/fragment/toAdd/${info.catagory.catagoryId }">新增</a></h4 ></li>
					</ul>
				</div>
		</div>
		<div class="col-md-10">

		<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
		
		<c:forEach items="${info.fragments }" var="fragment">
		
  <div class="panel panel-default">
    <div class="panel-heading" role="tab">
      <h3 class="panel-title">
        <a role="button" data-parent="#accordion" href="javascript:fragment.showContent('${fragment.fragmentId }')">
          ${fragment.title }
        </a>
      </h3>
    </div>
    <div id="Fragment${fragment.fragmentId }" class="panel-collapse collapse" role="tabpanel">
      <div class="panel-body">
      <pre><code id="content_fragment${fragment.fragmentId }"></code></pre>
       </div>
    </div>
  </div>
  		
  		</c:forEach>
  
  </div>
		
		</div>
		</div>
	</div>

</div>

<script src="<%=base %>/js/catagory.js"></script>
<script>
$(function() {
	$('.collapse').on('show.bs.collapse', function(e) {
		console.log($('pre code').html());
		$('pre code').each(function(i, block) {
			console.log($(this).html());
			hljs.highlightBlock(block);
		});
	});
});
</script>
